<template>
  <div class="app-container">
    <div class="container-bg" v-loading="globalLoading">
      <el-row :gutter="10">
        <el-col :span="20">
          <div
            style="
              margin: 0 10px 10px 0;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>
              Wi-Fi 列表
              <el-checkbox
                style="margin-left: 20px"
                v-model="wifiEnable"
                :true-label="1"
                :false-label="0"
                @change="onWifiEnableChange"
                >启用</el-checkbox
              >
            </div>
            <el-button
              size="mini"
              @click="getWifiList"
              icon="el-icon-refresh"
              :disabled="disableWifi"
              >扫描</el-button
            >
          </div>
          <el-table
            class="auto-table"
            :data="list"
            border
            element-loading-text="Loading"
            fit
            highlight-current-row
            :max-height="580"
            :min-height="500"
            @row-click="getWiFiInfo"
            v-loading="tableLoading"
          >
            <el-table-column align="center" label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi名称" prop="name" width="240">
            </el-table-column>
            <el-table-column align="center" label="Mac地址" prop="bssid" width="180">
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi频率" prop="frequency" width="120">
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi信号" prop="signalLevel" width="120">
            </el-table-column>
            <el-table-column align="center" label="加密方式" prop="flag">
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi状态" prop="wpa_state" width="120">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="4">
          <div>Wi-Fi 设置</div>
          <el-form ref="elForm2" :model="form" size="medium" v-loading="isConnenting">
            <el-form-item label="" prop="iAutioconnect">
              <el-checkbox
                v-model="form.iAutioconnect"
                :true-label="1"
                :false-label="0"
                >Wi-Fi 自动连接</el-checkbox
              >
            </el-form-item>
            <el-form-item label="Wi-Fi 名称" prop="wifiname">
              <el-input
                v-model="form.wifiname"
                placeholder="请输入Wi-Fi名称"
                style="width: 100%;"
                :readonly="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="Wi-Fi 密码" prop="wifipwd">
              <el-input
                v-model="form.wifipwd"
                placeholder="请输入Wi-Fi密码"
                style="width: 100%;"
                type="password"
                :disabled="form.sState == 'ready'"
                show-password
              >
              </el-input>
            </el-form-item>
            <div
              style="font-size: 12px; color: #ff4949; margin-bottom: 5px"
              v-if="form.sState == 'ready'"
            >
              wifi已连接，如需重设密码请先删除！
            </div>
            <el-form-item style="white-space: nowrap">
              <el-button
                :disabled="!form.wifiname || disableWifi"
                type="primary"
                size="medium"
                @click="submitForm"
                >连接</el-button
              >
              <el-popconfirm
                cancel-button-text="不用了"
                class="m-margin-l10"
                confirm-button-text="好的"
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除当前WiFi吗？"
                @confirm="doDelete"
              >
                <el-button
                  :disabled="!form.wifiname || disableWifi"
                  type="danger"
                  size="medium"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getNetworkWiFiEnableApi,
  setNetworkWiFiEnableApi,
  editNetworkWiFiOpenCloseApi,
  getNetworkWiFiStatusApi,
  getNetworkWiFiListApi,
  delNetworkWiFiListApi,
} from "@/api/network";
export default {
  data() {
    return {
      wifiEnable: 0,
      list: [],
      form: { wifiname: "" },
      timer: null,
      isConnenting: false,
      tableLoading: false,
      globalLoading: false
    };
  },
  created() {
    this.tableLoading = true
    this.getWifiEnable()
    this.getWifiList();
  },
  methods: {
    onWifiEnableChange (val) {
      this.globalLoading = true
      setNetworkWiFiEnableApi({ wifi_enable: val }).then(res => {
        this.globalLoading = false
      }).catch(err => {
        this.globalLoading = false
      })
    },
    getWifiEnable() {
      getNetworkWiFiEnableApi().then(res => {
        this.wifiEnable = res.wifi_enable
      }).catch(() => {
        this.wifiEnable = 0
      });
    },
    getNetworkWiFiStatus() {
      getNetworkWiFiStatusApi().then((res) => {
        console.log('[res] getNetworkWiFiStatusApi: /network/get_wifi_status', res)
        this.list.forEach(l => {
          if (res.name === '') return

          if (l.name === res.name) {
            l.wpa_state = res.wpa_state
          }
        })

        // if (res.wpa_state === '已连接') {
          // this.globalLoading = false
          // clearInterval(this.timer);
        // }
        // if (Array.isArray(res.wifilist)) {
        //   // if (msg) {
        //     let list = JSON.stringify(res.wifilist);
        //     // console.log(this.list);
        //     this.list = JSON.parse(list);
        //     this.setListiFavorite([this.form, "connect"]);
        //   // }
        // }
      });
    },
    getWifiList() {
      getNetworkWiFiListApi().then((res) => {
        this.tableLoading = false
        console.log('[res] getNetworkWiFiListApi: /network/wifi-list', res)
        if (Array.isArray(res.wifilist)) {
          res.wifilist.forEach(wifi => {
            if (!wifi.wpa_state) wifi.wpa_state = '未连接'
          })
          this.list = res.wifilist

          this.getNetworkWiFiStatus()
        }
      }).catch(() => {
        this.tableLoading = false
      });
    },
    // 连接
    submitForm() {
      this.isConnenting = true
      editNetworkWiFiOpenCloseApi(this.form).then(res => {
        if (res.error_msg === 'ok' || res.error_msg === '已连接') {
          this.turnGetTen();
        } else {
          this.$message.error(res.error_msg);
        }
        this.isConnenting = false
      }).catch(() => {
        this.isConnenting = false
      });
    },
    // 定时器十次
    turnGetTen() {
      // this.globalLoading = true
      // let time = 10;

      this.timer = setInterval(() => {
        // time--;
        this.getNetworkWiFiStatus();
        // if (time <= 0) {
          // this.globalLoading = false
          // clearInterval(this.timer);
        // }
      }, 5000);
    },
    // 点击获取详情
    getWiFiInfo(row, column) {
      this.form.wifiname = row.name
      // this.form = this.$fn.deepCopy(row);
      // this.$set(this.form, "iAutioconnect", 0);
      // this.$set(this.form, "wifipwd", "");
      // if (row.sState == "ready") {
      //   this.form.wifipwd = "******";
      // }
    },
    doDelete() {
      delNetworkWiFiListApi({ wifiname: this.form.wifiname })
        .then(res => {
          this.getWifiList()
        })
        .catch((err) => {
          this.getWifiList()
        });
    },
  },
  computed: {
    disableWifi() {
      return this.wifiEnable === 0
    }
  },
  destroyed() {
    if (this.timer) clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.app-container {
}
</style>
